<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.titleBarHeight + 'px' }">
		<title-bar :back="true" :title="title"></title-bar>
		<view class="page-content common-page-content" :style="{ minHeight: systemInfo.minHeight }">
			<view class="header-layout">
				<view class="header-image">
					<image v-if="form.coverUrl" :src="imageUrl + form.coverUrl" class="item-img"></image>
					<image v-else src="@/static/image/common/head_default.png" class="item-img"></image>
					<image mode="aspectFit" class="item-bg"></image>
				</view>
				<view class="upload-btn" @click="uploadPhoto(index)">上传封面</view>
			</view>
			<view class="info-item">
				<view class="title">相册名称：</view>
				<input class="info" v-model="form.name" maxlength="12" placeholder="请输入相册名称" />
			</view>
			<view class="info-item">
				<view class="title">是否公开：</view>
				<radio-group class="info" @change="openChange" :id="index">
					<radio color="#56BF84" style="margin-right: 26.28rpx;" value="1" :checked="form.isOpen == 1">公开</radio>
					<radio color="#56BF84" value="0" :checked="form.isOpen == 0">私密</radio>
				</radio-group>
			</view>
			<view class="common-margin-top"><common-button :title="!form.id ? '创建家族相册' : '修改家族相册'" @click="submit()"></common-button></view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			baseUrl: process.env.NODE_ENV === 'development' ? this.$config.baseUrl.dev : this.$config.baseUrl.pro,
			imageUrl: process.env.NODE_ENV === 'development' ? this.$config.imageUrl.dev : this.$config.imageUrl.pro,
			form: {
				isOpen: 1
			},
			title: '创建家族相册'
		};
	},
	computed: {
		...mapState({
			systemInfo: state => state.app.systemInfo
		})
	},
	methods: {
		/* 加载家族相册详情 */
		loadDetail() {
			this.$http.get('/ancestral-hall/album-group/' + this.form.id).then(res => {
				if (res.code === 200) {
					this.form = res.data;
				}
			});
		},
		/* 上传照片 */
		uploadPhoto(index) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed '],
				success: chooseImageRes => {
					uni.showLoading({
						title: '图片上传中...'
					});
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: this.baseUrl + '/app/common/upload',
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							Authorization: uni.getStorageSync('Authorization')
						},
						success: uploadFileRes => {
							let data = JSON.parse(uploadFileRes.data);
							this.$set(this.form, 'coverUrl', data.fileName);
							uni.hideLoading();
						},
						fail: error => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败，请重试'
							});
						}
					});
				}
			});
		},
		/* 是否公开选择 */
		openChange(e) {
			this.$set(this.form, 'isOpen', e.detail.value);
		},
		/* 创建家族相册 */
		createAlbumGroup() {
			if (this.form.id == undefined) {
				this.$http.postJson('/ancestral-hall/album-group', this.form).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'none',
							title: '创建成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				});
			} else {
				this.$http.put('/ancestral-hall/album-group', this.form).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				});
			}
		},
		/* 提交 */
		submit() {
			if (this.form.name == null || this.form.name.trim() == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入家族相册名称'
				});
				return;
			}
			this.$debounce.debounce({
				key: 'submit',
				time: 3000,
				success: () => {
					this.createAlbumGroup();
				}
			});
		}
	},
	onLoad(data) {
		this.form.id = data.id;
		this.form.ancestralHallId = data.ancestralHallId;
		if (this.form.id) {
			this.title = '家族相册信息';
			this.loadDetail();
		}
	}
};
</script>

<style lang="scss" scoped>
@import './create-ancestral-hall-album-group.scss';
</style>
